<template>
  <div class="block" v-loading="loading">
    <el-button
      size="small"
      style="position: absolute;
    right: 15px;
    top:10px
    "
      @click="$router.back(-1)"
    >返回</el-button>
    <el-timeline>
      <el-timeline-item :timestamp="date[0]" placement="top">
        <el-card>
          <div class="flex1">
            <section class="flex2">
              <h2>开始</h2>
              <p style="margin-left:40px;">{{person[0]}}</p>
              <p style="margin-left:20px;">提交于</p>
              <p style="margin-left:20px;">{{time[0]}}</p>
            </section>
          </div>
        </el-card>
      </el-timeline-item>
      <el-timeline-item :timestamp="date[1]" placement="top">
        <el-card>
          <div class="flex1">
            <section class="flex2">
              <h2>初稿</h2>
              <p style="margin-left:40px;">{{person[1]}}</p>
              <p style="margin-left:20px;">提交于</p>
              <p style="margin-left:20px;">{{time[1]}}</p>
            </section>
          </div>
        </el-card>
      </el-timeline-item>
      <el-timeline-item :timestamp="date[2]" placement="top">
        <el-card>
          <div class="flex1">
            <section class="flex2">
              <h2>一审</h2>
              <p style="margin-left:40px;">{{person[2]}}</p>
              <p style="margin-left:20px;">提交于</p>
              <p style="margin-left:20px;">{{time[2]}}</p>
            </section>
            <p class="yj"></p>
          </div>
          <p class="yj">意见:{{view[2]}}</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item :timestamp="date[3]" placement="top">
        <el-card>
          <div class="flex1">
            <section class="flex2">
              <h2>二审</h2>
              <p style="margin-left:40px;">{{person[3]}}</p>
              <p style="margin-left:20px;">提交于</p>
              <p style="margin-left:20px;">{{time[3]}}</p>
            </section>
            <p class="yj"></p>
          </div>
          <p class="yj">意见:{{view[2]}}</p>
        </el-card>
      </el-timeline-item>

      <el-timeline-item :timestamp="date[4]" placement="top">
        <el-card>
          <div class="flex1">
            <section class="flex2">
              <h2>终稿</h2>
              <p style="margin-left:40px;">{{person[4]}}</p>
              <p style="margin-left:20px;">提交于</p>
              <p style="margin-left:20px;">{{time[4]}}</p>
            </section>
            <p class="yj"></p>
          </div>
          <p class="yj">意见:{{view[2]}}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <div style="text-align:center">
      <el-button @click="end" type="primary" style="margin:30px auto;">项目终结</el-button>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      loading: false,
      itemid: "",
      person: [],
      time: [],
      view: [],
      date: []
    };
  },
  created() {
    var id = this.$route.query.id;
    this.itemid = id;
    this.getlist(id);
  },
  methods: {
    end() {
      var that = this;
      that.loading = true;
      request(`/opinion/complete`, {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: { itemId: that.itemid }
      })
        .then(res => {
          that.loading = false;
          console.log(res);
          if (res.data.code == 1) {
            that.$message.success(res.data.message);
            setTimeout(() => {
              that.$router.go(-1); //返回上一层
            }, 1000);
          } else {
            that.message.error(res.data.message);
          }
        })
        .catch(e => {
          that.loading = false;
          console.log(e);
        });
    },
    getlist(id) {
      var that = this;
      that.loading = true;
      request(`/opinion/selectopinion`, {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: { itemId: id }
      })
        .then(res => {
          that.loading = false;
          console.log(res);
          var obj = res.data.object;
          that.date = [
            obj.proCreateTimeForm,
            obj.createTimeForm,
            obj.reportTime1Form,
            obj.reportTime2From,
            obj.reportTime3From
          ];
          console.log(that.date);
          that.time = [
            obj.proCreateTime,
            obj.createTime,
            obj.reportTime1,
            obj.reportTime2,
            obj.reportTime3
          ];
          that.view = [obj.oneOpinion, obj.twoOpinion, obj.lastOpinion];
          that.person = [
            obj.proPrincipalName,
            obj.createrName,
            obj.oneAuditorName,
            obj.twoAuditorName,
            obj.lastAuthitorName
          ];
        })
        .catch(e => {
          that.loading = false;
          console.log(e);
        });
    }
  }
};
</script>

<style scoped>
.flex1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex2 {
  display: flex;
  align-items: center;
}
.block {
  padding-top: 37px;
  padding-left: 6px;
 padding-right:40%;
}
</style>